<template>
  <a-modal v-model:visible="visible" title="批量编辑图片" :footer="false" @cancel="closeModal">
    <a-typography-paragraph type="secondary">* 只对当前的页面生效</a-typography-paragraph>
    <!-- 表单项 -->
    <a-form layout="vertical" :model="formData" @finish="handleSubmit">
      <a-form-item label="分类" name="category">
        <a-auto-complete
          v-model:value="formData.category"
          style="min-width: 180px"
          :options="categoryOptions"
          placeholder="请输入分类"
          allowClear
        />
      </a-form-item>
      <a-form-item label="标签" name="tags">
        <a-select
          v-model:value="formData.tags"
          mode="tags"
          style="min-width: 180px"
          :options="tagsOptions"
          placeholder="请输入标签"
          allowClear
        ></a-select>
      </a-form-item>
      <a-form-item label="命名规则" name="nameRule">
        <a-input v-model:value="formData.nameRule" placeholder="请输入命名规则,输入{序号可动态生成}" allowClear>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { editPictureByBatchUsingPost, listPictureTagCategoryUsingGet } from '@/request/api/pictureController.ts'
import { message } from 'ant-design-vue'

interface Props {
  pictureList: API.PictureVO[]
  spaceId: number
  onSuccess:()=>void
}
const props = defineProps<Props>()
const formData=reactive({
  category: '', // 分类
  tags: [], // 标签
  nameRule: '', // 名称规则
})

const visible = ref<boolean>(false)

interface OptionsType {
  value?: string
  label?: string
}

const categoryOptions = ref<OptionsType[]>([])
const tagsOptions = ref<OptionsType[]>([])

// 获取标签和分类选项
const getCategoryTagsOptions = async () => {
  const { data: res } = await listPictureTagCategoryUsingGet()
  if (res.code === 0 && res.data) {
    // 转换下拉框接受的形式
    categoryOptions.value = (res.data.categoryList ?? []).map((category: string) => {
      return { value: category, label: category }
    })
    tagsOptions.value = (res.data.tagList ?? []).map((tag: string) => {
      return { value: tag, label: tag }
    })
  }
}
// 表单提交
const handleSubmit = async (values: any) => {
  if (!props.pictureList) return;
  const { data:res } = await editPictureByBatchUsingPost({
    pictureIdList: props.pictureList.map(picture => picture.id),
    spaceId: props.spaceId,
    ...values
  })
  if (res.code === 0 && res.data) {
    message.success('操作成功')
    closeModal()
    props.onSuccess?.()
  } else {
    message.error('操作失败' + res.message)
  }
}


// 关闭弹框
const closeModal = () => {
  visible.value = false
}
// 打开弹框
const openModal = () => {
  visible.value = true
}
// 暴露给父组件
defineExpose({
  openModal,
})
onMounted(()=> {
  getCategoryTagsOptions()
})
</script>
<style scoped lang="less"></style>
